\<template>
  <el-drawer
    title="图标选择器"
    :visible.sync="visible"
    :direction="direction"
    :modal="false"
    :before-close="closeDrawer"
  >
    <div class="icons">
      <div class="icon_box" v-for="icon_index in icon_indexes" :key="icon_index" @click="changeIcon(icons[icon_index])">
        <el-tooltip class="item" effect="light" :content="icon_index" placement="top">
          <div v-html="icons[icon_index]"></div>
        </el-tooltip>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: ["visible", "value"],
  data() {
    return {
      icons: {},
      icon_indexes: [],
      direction: "rtl",
    };
  },
  watch: {
  },
  created() {
    let icons = this.$store.state.dict.icon;
    this.icons = icons;
    this.icon_indexes = Object.keys(icons);
  },
  methods: {
    changeIcon(svg){
      this.$emit('update:value', svg)
    },
    closeDrawer() {
      this.$emit('update:visible', false)
    },
  },
};
</script>

<style lang="less">
.icons {
  padding: 10px;
  .icon_box {
    cursor: pointer;
    float: left;
    border: 1px dashed #d9d9d9;
    height: 32px;
    margin: 10px;
    padding: 5px;
    border-radius: 6px;
    svg {
      width: 32px;
      height: 32px;
    }
  }
  .icon_box:hover{
    border-color: #409eff;
  }
}
</style>